<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common/common.css">
</head>

<body>
    <div class="main">
        <div class="top flex_x start">
            <img class="icons" src="./image/6.png" alt="">
            <div class="list flex_x around">
                <div class=" item ">
                    Home
                </div>
                <div class="item active pos_r">
                    <span class="line  line1 pos_a"></span>
                    <span class="p012">About</span>
                    <span class="line line2 pos_a"></span>
                </div>
                <div class="item">Gallery</div>
                <div class="item">Contact</div>
            </div>

        </div>
        <div class="content flex_x around">
            <div class="mt_80">
                <div class="info1">Biography</div>
                <div class="info3">
                    Born on January 18, 1979, he is known for his versatility,innovative <br>
                    musical style, and profound talent.
                </div>
                <div class="info4">
                    Jay Chou has achieved great success in the field of music. His music works <br>
                    cover a variety of styles,including pop, rock, hip-hop, classical, etc. His <br>
                    songs are popular for their profound lyrics and unique arrangements, and <br>
                    are widely loved by Chinese music lovers around the world.
                </div>
            </div>
            <img src="./image/2.jpg" alt="">
        </div>
    </div>
</body>
<style>
   
    .info1 {
        font-family: 'jost', sans-serif;
    }
    .info3,.info4{
        font-family: 'cat', sans-serif;
        opacity: 0.88;

    }
    @media (max-width: 500px) {
        .main {
            padding: 2px;
            box-sizing: border-box;
            background-image: url("./image/1.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            width: 100vw;
            height: 100vh;
        }

        .top {
            display: block;
        }

        .main img {
            width: 60px;
            height: 60px;
            border-radius: 50px;
        }

        .list {
            color: #fff;
            font-weight: bold;
            font-size: 20px;
        }

        .item {
            padding: 0 12px;
        }

        .line {
            display: inline-block;
            width: 1px;
            height: 40px;
            background-color: #fff;
        }

        .p012 {
            padding: 0 12px;
        }

        .line1 {
            top: -14px;
        }

        .line2 {
            top: 14px;
        }


        .info1 {
            font-size: 40px;
            color: #fff;
            font-weight: bold;
        }

        .mt_80 {
            margin-top: 10px;
        }

        .info1 {
            margin-left: 10px;

        }

        .info2 {
            margin-left: 10px;
            margin-top: 40px;
        }

        .info3,
        .info4 {
            text-align: left;
            margin-left: 80px;
            line-height: 40px;
            color: #fff;
            font-size: 20px;
            margin-top: 20px;
        }
.content{
    display: block;
}
        .content img {
            width: 400px;
            height: 200px;
            margin: 10px auto;
        }
    }

    @media (min-width: 501px) {
        .main {
            padding: 48px;
            box-sizing: border-box;
            background-image: url("./image/1.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            width: 100vw;
            height: 100vh;
        }

        .main .icons {
            width: 80px;
            height: 80px;
            border-radius: 50px;
        }

        .list {
            color: #fff;
            font-weight: bold;
            font-size: 32px;
            width: 60vw;
        }

        .item {
            padding: 0 12px;
        }

        .line {
            display: inline-block;
            width: 4px;
            height: 50px;
            background-color: #fff;
        }

        .p012 {
            padding: 0 12px;
        }

        .line1 {
            top: -14px;
        }

        .line2 {
            top: 14px;
        }


        .info1 {
            font-size: 80px;
            color: #fff;
            font-weight: bold;
        }

        .mt_80 {
            margin-top: 220px;
        }

        .info1 {
            margin-left: 80px;

        }

        .info2 {
            margin-left: 150px;
            margin-top: 40px;
        }

        .info3,
        .info4 {
            text-align: left;
            margin-left: 80px;
            line-height: 40px;
            color: #fff;
            font-size: 30px;
            margin-top: 40px;
        }

        .content img {
            width: 380px;
            height: 500px;
            margin-top: 40px;
        }
    }
</style>

</html>